/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

/*===== VARIABLES CSS =====*/
:root{
    --header-height: 3rem;
    --first-color: #3498db;

  /*===== Colors =====*/
  --first-color: #3E0E12;
  --first-color-dark: #2F0A0D;
  --text-color: #524748;
  --first-color-light: #7B6F71;
  --first-color-lighten: #FBF9F9;

  /*===== Font and typography =====*/
  --body-font: 'Poppins', sans-serif;
  --biggest-font-size: 2.5rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1.125rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  /*===== Font weight =====*/
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-bold: 700;

  /*===== Margenes =====*/
  --mb-1: .5rem;
  --mb-2: 1rem;
  --mb-3: 1.5rem;
  --mb-4: 2rem;
  --mb-5: 2.5rem;
  --mb-6: 3rem;

  /*===== z index =====*/
  --z-normal: 1;
  --z-tooltip: 10;
  --z-fixed: 100;
}

@media screen and (min-width: 768px){
  :root{
    --biggest-font-size: 4.5rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}
/* For WebKit browsers (Chrome, Safari) */
::-webkit-scrollbar {
  width: 7px; /* Set the width of the scrollbar */
}

::-webkit-scrollbar-thumb {
  background-color: #f67058; /* Color of the scrollbar thumb */
}

::-webkit-scrollbar-track {
  background-color: transparent; /* Background color of the track */
}

  /*===== BASE =====*/
  *,::before,::after{
    box-sizing: border-box;
  } 

  body {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
  }

  h1, h2, h3, p, ul, li, a, nav {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
  }

  h2{
    text-align: center;
  }

  section {
    min-height: 100vh; /* Full viewport height */
    display: flex;
    flex-direction: column; /* Align items vertically */
    justify-content: flex-start; /* Align items to the top */
    align-items: center; /* Center items horizontally */
    padding: 1rem 0; /* Add some padding at the top */
  }

  .section-title {
    text-align: center; /* Center align the text */
    margin: 0; /* Remove default margins */
    padding-top: 1rem; /* Add some padding for spacing */
    font-size: 2rem; /* Adjust font size as needed */
    position: relative; /* Needed for the pseudo-element */
    overflow: hidden; /* Ensure the pseudo-element doesn't overflow */
    transition: color 0.3s ease; /* Smooth transition for text color */
    color: #040404; /* Default text color */
  }
  
  .section-title::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: #a770ef; /* Default underline color */
    transition: all 0.4s ease;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    transform: translateX(-50%);
  }
  
  .section-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    background: #6a0dad; /* New underline color on hover */
    transition: all 0.4s ease;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    transform: translateX(-50%);
  }
  
  .section-title:hover::before {
    opacity: 0; /* Hide the default underline on hover */
  }
  
  .section-title:hover::after {
    width: 100%; /* Show the new underline on hover */
  }
  
  .section-title:hover {
    color: #6a0dad; /* Change text color on hover */
  }
  
  
  a {
    color: var(--first-color);
    text-decoration: none;
  }
  html {
    scroll-behavior: smooth;
  }

 /* Header styles */
.l-header {
  width: 100%;
  position: fixed;
  top: 0;
  padding: 0.5rem 0; /* Slightly more padding for better spacing */
  left: 0;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.nav {
  display: flex;
  justify-content: space-between; /* Distributes items to left and right */
  align-items: center;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px; /* Adjust padding as needed */
}

.nav__logo {
  font-size: 1.5rem;
  font-weight: bold;
  /* Ensure the logo is aligned to the left */
}

.nav__menu {
  display: flex;
  align-items: center;
  /* Ensure the menu is aligned to the right */
}

.nav__list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.nav__item {
  margin-left: 20px;
}

.nav__link {
  display: inline-block;
  align-items: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  color: #333;
  padding: 0.5rem 1rem;
  transition: background-color 0.3s, color 0.3s;
}

.nav__link .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3); /* Adjust color and opacity as needed */
  width: 100px;
  height: 100px;
  transform: scale(0);
  pointer-events: none;
  transition: transform 0.6s, opacity 0.6s;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform-origin: center;
  /* Animation keyframes */
  animation: ripple-animation 0.6s linear;
}

@keyframes ripple-animation {
  to {
      transform: scale(2);
      opacity: 0;
  }
}

.nav__link i {
  margin-right: 0.5rem; /* Space between icon and text */
  font-size: 1.2rem; /* Adjust size as needed */
}

.nav__link:hover,
.nav__link.active {
  color: #ff6347;
  background-color: rgba(0, 0, 0, 0.1); /* Optional background color on hover */
  border-radius: 0.25rem; /* Rounded corners for hover effect */
}

/* Toggle and Close Button */
.nav__toggle,
.nav__close {
  display: none;
}

 /* Mobile Styles */
@media (max-width: 768px) {
  .nav__menu {
    display: none; /* Hide the menu by default */
  }

  .nav__toggle {
    display: block;
    font-size: 1.5rem;
    cursor: pointer;
    position: absolute;
    right: 1rem;
    z-index: 10000; /* Ensure it is above the overlay */
  }

  .nav__toggle #menu-icon {
    display: inline-block;
  }
  
  .nav__toggle #close-icon {
    display: none; /* Initially hide the close icon */
  }

  .nav__toggle[aria-expanded="true"] #menu-icon {
    display: none;
  }

  .nav__toggle[aria-expanded="true"] #close-icon {
    display: inline-block;
  }

  /* Menu display styles when visible */
  .nav__menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: rgba(135, 206, 235, 0.4); /* Light sky blue with 40% opacity */
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 9999; /* Ensure it is on top */
  }

  .nav__menu.show {
    transform: translateX(0);
  }

  .nav__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    cursor: pointer;
    color: var(--first-color);
  }

  .nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* Space between menu items */
  }

  .nav__link {
    text-decoration: none;
    font-size: 1.5rem;
    color: var(--first-color);
    transition: color 0.3s;
    display: flex;
    align-items: center; /* Ensure text and icon align */
    font-weight: bold;
  }

  .nav__link i {
    font-size: 1rem; /* Smaller icon size on mobile */
    margin-right: 0.5rem; /* Space between icon and text */
    transition: color 0.3s; /* Ensure icon color transitions smoothly */
  }

  .nav__link:hover,
  .nav__link.active {
    color: red; /* Red color for text on hover */
  }

  .nav__link:hover i {
    color: red; /* Red color for icon on hover */
  }

 /* CSS for the overlay */
.nav__overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(135, 206, 235, 0.4); /* Light sky blue with 40% opacity */
  opacity: 0;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  pointer-events: none; /* Initially non-interactive */
  z-index: 9998; /* Ensure it is below the menu */
}

/* Blur effect class */
.blur {
  filter: blur(5px);
}

    /* Disable background scrolling */
/* .no-scroll {
  overflow: hidden;
} */
  section {
    min-height: 100vh; /* Full viewport height */
    display: flex;
    flex-direction: column; /* Align items vertically */
    justify-content: flex-start; /* Align items to the top */
    align-items: center; /* Center items horizontally */
    padding: 1rem 0; /* Add some padding at the top */
  }
  .section-title {
    text-align: center; /* Center align the text */
    margin-bottom: 1rem; /* Remove default margins */
    padding: 0; /* Add some padding for spacing */
    font-size: 2rem; /* Adjust font size as needed */
    position: relative; /* Needed for the pseudo-element */
    overflow: hidden; /* Ensure the pseudo-element doesn't overflow */
    transition: color 0.3s ease; /* Smooth transition for text color */
    color: #040404; /* Default text color */
  }
  
  .section-title::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: #a770ef; /* Default underline color */
    transition: all 0.4s ease;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    transform: translateX(-50%);
  }
  
  .section-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    background: #6a0dad; /* New underline color on hover */
    transition: all 0.4s ease;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    transform: translateX(-50%);
  }
  
  .section-title:hover::before {
    opacity: 0; /* Hide the default underline on hover */
  }
  
  .section-title:hover::after {
    width: 100%; /* Show the new underline on hover */
  }
  
  .section-title:hover {
    color: #6a0dad; /* Change text color on hover */
  }
}


  /* Scroll Top */
  .scrolltop {
    position: fixed;
    right: 2rem;
    bottom: 1rem;
    background-color: #a363f7;
    padding: .3rem;
    border-radius: .5rem;
    z-index: 100;
    opacity: 0; /* Initially hidden */
    pointer-events: none; /* Disable pointer events initially */
    transition: opacity .4s, pointer-events .4s;
  }

  .scrolltop.show-scroll {
    opacity: 1; /* Make visible when scrolled down */
    pointer-events: auto; /* Enable pointer events */
  }

  .scrolltop__icon {
    font-size: 1.5rem;
    color: #fff;
    margin-top: 3px;
  }
  /* Change color on hover */
  .scrolltop:hover {
    background-color: #f57b56; /* Tomato color */
  }

  .l-main{
    background-color: #f4f4f4;
  }

/* Home Section */
.home {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-image: url('https://c.pxhere.com/photos/bd/82/office_neo_urban_apple_trend_laptop_hardware_computer_keyboard-592444.jpg!d');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  position: relative;
  padding: 1rem; /* Add padding for small screens */
}

/* Content Styling */
.home__content {
  position: relative; /* Make this relative for absolute positioning inside */
  max-width: 1000px; /* Max width to accommodate both elements */
  width: 90%;
  padding: 20px;
  box-sizing: border-box;
  display: flex; /* Use flexbox to align children side by side */
}

.quote-container {
  position: relative;
  width: 100%;
  min-height: 300px;
}

.quote {
  width: 100%;
  background: rgba(251, 194, 235, 0.2); /* Set background to light color with 50% opacity */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.quote:hover {
  transform: translateY(-10px) scale(1.05); /* Lift up and slightly enlarge on hover */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6); /* Deepen the shadow on hover */
}

.quote-text, .message-text {
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 0.5rem 0;
  color: #000000; /* Darker color for better readability */
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  /* font-weight: 700; */
}

.quote-text span {
  display: block;
  margin-top: 10px;
  font-style: italic;
}

.message-text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s, transform 0.5s;
}

.message-text.show {
  opacity: 1;
  transform: translateY(0);
}

.about-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  margin-top: 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background-color:  #a770ef;
  border: none;
  border-radius: 25px;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 15px rgba(248, 69, 38, 0.3);
  position: relative;
  overflow: hidden;
}

.about-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.75s ease;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
}

.about-button:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

.about-button:hover {
  background-color: #f67058;;
  box-shadow: 0 15px 20px rgba(0, 123, 255, 0.4);
  transform: translateY(-2px);
}

.about-button:active {
  transform: translateY(1px);
  box-shadow: 0 6px 10px rgba(0, 123, 255, 0.2);
}

/* Position the button above the social icons */
.home .about-button {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
}


.home__social {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.home__social-icon {
  color: #fff;
  font-size: 24px;
  margin: 0 10px;
  transition: color 0.3s, transform 0.3s;
}

.home__social-icon:hover {
  color: #ff6347;
  transform: scale(1.2);
}

@media (max-width: 768px) {
  .home {
    padding: 1rem; /* Maintain padding for smaller screens */
  }

  .home__content {
    width: 100%;
    margin: 0px;
    padding: 0px;
  }

  .quote-container {
    min-height: 200px; /* Reduce minimum height to avoid overflow */
  }

  .quote {
    padding: 15px; /* Reduce padding for smaller screens */
  }

  .quote-text, .message-text {
    font-size: 1rem; /* Adjust font size for smaller screens */
    text-align: left;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 700;
  }

  .button {
    opacity: 0;
  }
}


  /*BUTTONS*/
  .button {
      display: inline-block;
      background-color: var(--first-color);
      color: #fff;
      padding: .75rem 1rem;
      border-radius: .5rem;
      font-weight: var(--font-medium);
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: background-color 0.3s ease;
    }

  .button:hover {
      background-color: #f67058;
  }




 /*===== ABOUT =====*/
.about {
  padding: 3rem 2rem; /* Increased padding for a more spacious look */
  background-color: #f4f4f4; /* Light background for better contrast */
  border-radius: 8px; /* Slightly rounded corners for a softer look */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

.about__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 2rem; /* Add padding to the container for left and right gaps */
  flex-flow: wrap;
  margin-top: 2rem;
}

.about__img {
  flex: 1;
}

.about__img img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.about__data {
  flex: 1;
  padding: 0 3rem; /* Add padding to the data section for left and right gaps */
}

.about__subtitle {
  font-size: var(--h2-font-size);
  font-weight: var(--font-semi-bold);
  color: var(--first-color);
  margin-bottom: var(--mb-2);
}

.about__text {
  font-size: var(--normal-font-size);
  line-height: 1.6;
  text-align: justify; /* Justify text */
}

.resume-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  margin-top: 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background-color:  #a770ef;
  border: none;
  border-radius: 50px;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 15px rgba(248, 69, 38, 0.3);
  position: relative;
  overflow: hidden;
}

.resume-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.75s ease;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
}

.resume-button:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

.resume-button:hover {
  background-color: #f67058;;
  box-shadow: 0 15px 20px rgba(0, 123, 255, 0.4);
  transform: translateY(-2px);
}

.resume-button:active {
  transform: translateY(1px);
  box-shadow: 0 6px 10px rgba(0, 123, 255, 0.2);
}


/* Media query for responsive design */
@media (max-width: 768px) {
  .about__container {
    flex-direction: column; /* Stack items vertically */
    padding: 0px; /* Reduce padding for smaller screens */
    flex-flow: wrap;
  }

  .about__data {
    width: 100%; /* Ensure full width */
    padding: 0px;
  }

  .about__subtitle {
    font-size: var(--h3-font-size); /* Adjust subtitle font size */
  }

  .about__text {
    width: 100%; /* Ensure paragraph text has no gaps */
    margin: 0; /* Remove any default margin */
    padding: 15px; /* Remove any default padding */
  }
}



 /*===== SKILLS =====*/
 .skills {
  padding: 3rem 2rem; /* Increased padding for a more spacious look */
  background-color: #f4f4f4; /* Light background for better contrast */
  border-radius: 8px; /* Slightly rounded corners for a softer look */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

.skills__main-card {
  border: 1px solid #f4f4f4; /* Light border for a cleaner look */
  border-radius: 8px;
  background-color: #f4f4f4; /* Transparent background */
  width: 92%; /* Set the width to 92% of the container */
  margin-top: 2rem; /* Center the card horizontally */
  transition: opacity 0.3s ease; /* Smooth transition for opacity */
}

.skills__sub-card {
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, #cfb3f3 0%, #f2c6d4 100%);

  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add shadow for depth */
}

.skills__sub-card:hover {
  transform: translateY(-5px); /* Lift effect on hover */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
}

.skills__sub-card h3 {
  margin-bottom: 0.5rem; /* Space between header and skills */
  font-size: 1.2rem; /* Slightly larger font size */
  color: #333;
  text-align: center; /* Centered text for better alignment */
}

.skills__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem; /* Increased gap for spacing */
}

.skills__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100px; /* Adjust width to fit icons */
  transition: transform 0.3s ease; /* Smooth transition for scaling */
}

.skills__item:hover {
  transform: scale(1.05); /* Slightly enlarge the item on hover */
}

.skills__item img {
  width: 60px; /* Slightly larger icon size for better visibility */
  height: 60px;
  margin-bottom: 0.5rem;
  border-radius: 50%; /* Circular icons for a modern look */
  transition: transform 0.3s ease; /* Smooth transition for scaling */
}

.skills__item p {
  font-size: 0.9rem;
  color: #333;
  margin: 0; /* Remove default margin */
}

/* Media Query for Small Screens */
@media (max-width: 768px) {
  .skills {
    padding: 0px; /* Increased padding for a more spacious look */
    background-color: #f4f4f4; /* Light background for better contrast */
    border-radius: 8px; /* Slightly rounded corners for a softer look */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
  }

  .skills__main-card {
    border-radius: 8px; /* Slightly rounded corners */
    width: 100%; /* Adjust width for better responsiveness */
    margin: 0 auto; /* Center the card horizontally */
    padding: 1.5rem;
  }

  .skills__sub-card {
    border: 1px solid #ddd; /* Light border for sub-cards */
    border-radius: 8px; /* Rounded corners */
    padding: 1rem;
    margin-bottom: 1rem; /* Space between sub-cards */
    background-color: #f9f9f9; /* Light background for sub-cards */
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center align items */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
  }

  .skills__sub-card h3 {
    margin-bottom: 0.5rem; /* Reduced margin for better spacing */
    font-size: 1.2rem; /* Increased header size for emphasis */
    color: #333;
    flex-shrink: 0; /* Prevent the header from shrinking */
  }

  .skills__container {
    display: flex; /* Ensure container is flex */
    flex-wrap: wrap; /* Allow items to wrap */
    justify-content: center; /* Center items */
    gap: 1rem; /* Space between items */
    width: 100%; /* Full width for container */
  }

  .skills__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 80px; /* Fixed width for consistency */
  }

  .skills__item img {
    width: 48px; /* Uniform icon size */
    height: 48px;
    margin-bottom: 0.5rem;
    transition: transform 0.3s ease;
  }

  .skills__item p {
    font-size: 0.9rem; /* Font size for descriptions */
    color: #333;
  }

  /* Hover effect for icons */
  .skills__item:hover img {
    transform: scale(1.1); /* Scale effect on hover */
  }
}


/* Media Query for Large Screens */
@media (min-width: 769px) {
  .skills__main-card {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 1rem; /* Gap between cards */
  }
}



 /*===== QUALIFICATION =====*/
.qualification {
  padding: 3rem 2rem; /* Increased padding for a more spacious look */
  background-color: #f4f4f4; /* Light background for better contrast */
  border-radius: 8px; /* Slightly rounded corners for a softer look */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

.qualification__container {
  display: flex;
  justify-content: space-between; /* Space between sections */
  width: 92%;
  margin: 0 auto; /* Center the container */
  gap: 2rem; /* Gap between education and experience containers */
  margin-top: 2rem;
}

.qualification__education,
.qualification__experience {
  flex: 1; /* Take equal space */
  min-width: 250px; /* Minimum width for consistency */
}

.qualification__heading {
  font-size: 1.5rem; /* Increased heading size */
  margin-bottom: 1.5rem; /* Gap below heading */
  text-align: center;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

.qualification__card {
  display: flex;
  align-items: center;
  background-color: #fff; /* White background */
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 2rem; /* Gap between cards */
  position: relative; /* For absolute positioning of paragraph */
  overflow: hidden; /* Hide overflow content */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
  background: linear-gradient(135deg, #f6a698 0%, #e7c6e0 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Soft shadow */
  flex: 1; /* Make cards take equal space */
  min-height: 200px; /* Set a minimum height for uniformity */
}

.qualification__card:hover {
  transform: translateY(-10px); /* Lift effect on hover */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
}

.qualification__image {
  width: 150px; /* Fixed size for all images */
  height: 150px;
  border-radius: 50%; /* Make images circular */
  margin-right: 1.5rem; /* Space between image and text */
  object-fit: cover; /* Ensure image covers the area */
  transition: transform 0.3s ease; /* Smooth transition for image */
}

.qualification__card:hover .qualification__image {
  transform: scale(1.1); /* Slightly enlarge the image on hover */
}

.qualification__info {
  flex: 1; /* Take remaining space */
  transition: opacity 0.3s ease; /* Smooth transition */
}

.qualification__title,
.qualification__company,
.qualification__date,
.qualification__cgpa {
  margin: 0; /* Remove margin for alignment */
  color: #fff;
  transition: opacity 0.3s ease; /* Smooth transition */
}

.qualification__title {
  font-size: 1.2rem; /* Title size */
  font-weight: bold;
}

.qualification__company,
.qualification__date,
.qualification__cgpa {
  display: block; /* Move these elements to a new line */
  font-size: 1rem; /* Default size */
  margin-top: 0.5rem; /* Margin for spacing between elements */
}

.qualification__company {
  font-size: 1rem; /* Company size */
}

.qualification__date {
  font-size: 0.9rem; /* Date size */
}

.qualification__cgpa {
  font-size: 0.9rem; /* CGPA size */
}

.qualification__description {
  font-size: 1rem;
  color: #000000;
  text-align: left; /* Left align text */
  display: none; /* Initially hidden */
  margin-left: 1.5rem; /* Add margin for spacing */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transition */
  opacity: 0; /* Initially hidden */
  transform: translateY(10px); /* Slightly move down for a better effect */
}

.qualification__card:hover .qualification__info {
  opacity: 0; /* Hide the info content on hover */
  display: none;
}

.qualification__card:hover .qualification__description {
  display: block; /* Show paragraph content on hover */
  opacity: 1; /* Fade in the paragraph */
  transform: translateY(0); /* Move to original position */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .qualification {
      padding: 0; /* Reset padding for small screens */
      background-color: #f4f4f4; /* Light background for better contrast */
      border-radius: 8px; /* Slightly rounded corners for a softer look */
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
  } 
  .qualification__container {
      flex-direction: column; /* Stack sections on small screens */
      align-items: center; /* Center align items */
      width: 100%; /* Full width on small screens */
      padding: 0 1.5rem; /* Add some padding for small screens */
  }

  .qualification__education,
  .qualification__experience {
      width: 100%; /* Full width on small screens */
      min-height: 300px; /* Set a fixed height for uniformity */
      display: flex;
      flex-direction: column; /* Stack items vertically */
      justify-content: space-between; /* Space between cards */
      align-items: center; /* Center align content */
  }

  .qualification__card {
      width: 100%; /* Full width on small screens */
      display: flex;
      flex-direction: column; /* Stack image and text vertically */
      align-items: center; /* Center align content */
      margin-bottom: 2rem; /* Gap between cards */
  }

  .qualification__image {
      width: 100px; /* Adjust image size for smaller screens */
      height: 100px; /* Adjust height */
      margin: 0; /* Space below image */
  }

  .qualification__info {
      text-align: center; /* Center align text */
  }

  .qualification__title,
  .qualification__company,
  .qualification__date,
  .qualification__description {
      margin: 0; /* Remove margin for alignment */
      color: #fff; /* Text color */
      transition: opacity 0.3s ease; /* Smooth transition */
      text-align: center; /* Center align text */
  }

  .qualification__description {
      color: #000000;
      text-align: justify;
      display: none; /* Ensure description is shown */
      opacity: 0; /* Make sure it is visible */
      transform: translateY(0); /* Reset transformation */
  }
  .qualification__card:hover .qualification__info {
      opacity: 0; /* Hide the info content on hover */
      display: none;
  }

  .qualification__card:hover .qualification__description {
      display: block; /* Show paragraph content on hover */
      opacity: 1; /* Fade in the paragraph */
      transform: translateY(0); /* Move to original position */
  }
}


  /*===== PROJECT IN MIND =====*/
  .project__container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
  }

  .project__img {
      flex: 1;
  }

  .project__data {
      flex: 1;
  }

  .project__title {
      font-size: var(--h1-font-size);
      color: var(--first-color);
  }

  .project__description {
      font-size: var(--normal-font-size);
      color: var(--text-color);
      margin: var(--mb-4) 0;
  }

  .project__button {
      background-color: var(--first-color);
      color: #fff;
      padding: .75rem 1.5rem;
      border-radius: .5rem;
      font-weight: var(--font-medium);
      transition: .3s;
  }

  .project__button:hover {
      background-color: var(--first-color-dark);
  }

/* Portfolio Section */
.portfolio {
  padding: 3rem 2rem; /* Increased padding for a more spacious look */
  background-color: #f4f4f4; /* Light background for better contrast */
  border-radius: 8px; /* Slightly rounded corners for a softer look */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

.portfolio__container {
  width: 92%;
  margin-top: 2rem;
}

.portfolio__section-title {
  font-size: 1.5rem; /* Increased heading size */
  margin-bottom: 1.5rem; /* Gap below heading */
  text-align: center;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

.portfolio__row {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping to the next line */
  justify-content: space-between; /* Space between items */
  gap: 2rem; /* Space between the content items */
  margin-bottom: 2rem;
}

.portfolio__content {
  flex: 1 1 calc(30% - 1rem); /* Adjust width to allow 3 items per row */
  background: linear-gradient(135deg, #fbc2eb 0%, #a6c0fe 100%);
  padding: 1.5rem; /* Padding for the content */
  border-radius: 15px; /* Rounded corners */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Soft shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for hover effects */
  position: relative; /* Position relative for pseudo-elements */
  color: #fff; /* Text color */
  min-height: 200px; /* Minimum height to ensure uniformity */
}

.portfolio__content:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
}

.portfolio__content:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.portfolio__data {
  position: relative;
  z-index: 1; /* Keep content above the pseudo-element */
  text-align: center; /* Center text in content */
}

.portfolio__title {
  font-size: 1.5rem; /* Font size for title */
  margin-bottom: 0.5rem; /* Margin below title */
  color: #393939; /* Title color */
}

.portfolio__description {
  font-size: 0.9rem; /* Font size for description */
  line-height: 1.4; /* Line height for better readability */
  color: #0d0d0d; /* Description color */
  transform: translateY(0); /* No slide up effect */
  text-align: justify;
}

/* Certifications Section - Reduced Size */
.portfolio__section-title {
  font-size: 1.3rem; /* Slightly smaller heading size */
  margin-bottom: 1rem; /* Reduced gap below heading */
}

.portfolio__content {
  flex: 1 1 calc(45% - 1rem); /* Adjust width to allow more items per row */
  padding: 1rem; /* Reduced padding for the content */
  min-height: 150px; /* Reduced minimum height */
}

.portfolio__row {
  gap: 1rem; /* Reduced space between the content items */
  margin-bottom: 1rem; /* Reduced margin bottom */
}

.portfolio__title {
  font-size: 1.2rem; /* Slightly smaller font size for title */
  margin-bottom: 0.3rem; /* Reduced margin below title */
}

.portfolio__description {
  font-size: 0.8rem; /* Smaller font size for description */
  line-height: 1.2; /* Reduced line height for better readability */
}

/* Responsive Design */
@media (max-width: 768px) {
  .portfolio {
    padding: 0rem; /* Increased padding for a more spacious look */
    background-color: #f4f4f4; /* Light background for better contrast */
    border-radius: 8px; /* Slightly rounded corners for a softer look */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
  }
  .portfolio__row {
      flex-direction: column; /* Stack vertically on mobile */
  }
  
  .portfolio__container {
    width: 100%; /* Full width on small screens */
    margin: 0 auto;
    padding: 0 1.5rem;
  }
  
  .portfolio__content {
      margin: 1rem 0; /* Margin for spacing */
      flex: 1 1 100%; /* Full width on mobile */
      min-height: 150px; /* Adjust minimum height for mobile */
  }
}




 /*===== CONTACT ME =====*/
.contact {
  padding: 3rem 2rem; /* Increased padding for a more spacious look */
  background-color: #f4f4f4; /* Light background for better contrast */
  border-radius: 8px; /* Slightly rounded corners for a softer look */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

.contact__container {
  display: flex;
  flex-direction: row; /* Row layout */
  align-items: flex-start; /* Align items to the start */
  justify-content: center; /* Center content horizontally */
  width: 92%;
  padding: 2rem;
}

.contact__image {
  flex: 1; /* Take equal space */
  margin-right: 2rem; /* Space between image and form */
}

.contact__img {
  width: 100%; /* Make image responsive */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
  transition: transform 0.3s; /* Transition for hover effect */
}

.contact__img:hover {
  transform: scale(1.05); /* Scale up image on hover */
}

.contact__form {
  flex: 2; /* Form takes more space */
  width: 100%;
}

.contact__inputs {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.contact__input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 1rem;
  transition: border 0.3s, box-shadow 0.3s; /* Add transition for box-shadow */
}

.contact__input:focus {
  border-color: #a770ef;
  outline: none;
  box-shadow: 0 0 5px rgba(167, 112, 239, 0.5); /* Subtle glow effect on focus */
}

.contact__button {
  background: #a770ef;
  border: none;
  border-radius: 20px;
  color: white;
  cursor: pointer;
  padding: 1rem 2rem;
  text-align: center;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s; /* Add transition for box-shadow */
}

.contact__button:hover {
  background: #9b51e0;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shadow effect on hover */
}
.error {
  border: 2px solid red;
}

@media (max-width: 768px) {
  .contact__container {
      flex-direction: column; /* Stack items on smaller screens */
      align-items: center; /* Center items */
      padding: 0px;
  }

  .contact__image {
      margin: 0 0 2rem 0; /* Margin for spacing */
  }

  .contact__inputs {
      flex-direction: column;
      gap: 0.5rem;
  }

  .contact__input {
      padding: 0.5rem 1rem;
  }
  .contact__button {
    background: #a770ef;
    border: none;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    padding: 1rem 2rem;
    text-align: center;
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s; /* Add transition for box-shadow */
  }
  
  .contact__button:hover {
    background: #9b51e0;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shadow effect on hover */
  }

}


  /*===== FOOTER =====*/
  .footer {
      background-color: #333;
      color: #fff;
      text-align: center;
      padding: 1rem 0;
  }

  .footer__title {
      font-size: 1.5rem;
      font-weight: 600;
  }

  .footer__social {
      display: flex;
      justify-content: center;
      margin-bottom: 1rem;
  }

  .footer__icon {
      color: #fff;
      font-size: 1.5rem;
      margin: 0 1rem;
      text-decoration: none;
  }

  .footer__icon:hover {
      color: #ff6347;
  }
  .footer__title:hover {
    color: #ff6347;
}

  .footer p {
      font-size: 0.9rem;
      color: #bbb;
  }

/*===== MEDIA QUERIES =====*/
@media screen and (max-width: 768px) {
    .home {
        flex-direction: column;
        text-align: center;
    }

    .about__container,
    .qualification__container,
    .services__container,
    .project__container,
    .contact__container {
        flex-direction: column;
    }

    .about__img,
    .qualification__content,
    .services__content,
    .project__img,
    .project__data,
    .contact__data,
    .contact__form {
        width: 100%;
    }
}